<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
</head>
<body>
<div id="app" class="container">
    <div class="row" style="background-color: white; height: 60px; padding: 13px; border: none; border-radius: 8px;">
        <div class="col-md-4" style="margin-left: 20px;margin-right: 5px;height:30px;line-height: 30px;">
            <lab style="float: left;margin-left: 20px;margin-right: 20px;">报修类型：</lab>
            <select v-model="comId" class="form-control" style="float: left;width:140px;">
                <option value="null">请选择</option>
                <option :value="t.id" v-for="t in typeList">{{t.name}}</option>
            </select>
        </div>
        <div class="col-md-4">
            <lab style="float: left;margin-left: 20px;margin-right: 20px;height: 30px;line-height: 30px;">处理状态：</lab>
            <select v-model="status" class="form-control" style="float: left;width:140px;">
                <option value="null">请选择</option>
                <option value="0">未处理</option>
                <option value="1">已处理</option>
            </select>
        </div>
        <div class="col-md-1">
            <button class="btn btn-primary" @click="requestRepairList(1)">搜索</button>
        </div>
        <div class="col-md-1">
            <button class="btn btn-primary" @click="doback">重置</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="height: 50px; line-height: 50px;">
            <button class="btn btn-info" @click="doAdd">添加</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <caption>报修类型列表</caption>
                <thead>
                <tr>
                    <th>报修类型</th>
                    <th>报修内容</th>
                    <th>报修人</th>
                    <th>报修时间</th>
                    <th>处理状态</th>
                    <th>处理人</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="u in repairList">
                    <td>{{u.rtName}}</td>
                    <td>{{u.remarks}}</td>
                    <td>{{u.ownerName}}</td>
                    <td>{{u.comDate}}</td>
                    <td>
                        <span v-if="u.status==1" style="background-color: #029688;padding: 5px 5px 5px 5px ;border-radius: 3px">已处理</span>
                        <span v-if="u.status==0" style="background-color: #ff5722;padding: 5px 5px 5px 5px ;border-radius: 3px">未处理</span>
                    </td>
                    <td>{{u.clr}}</td>
                    <td>
                        <button class="btn btn-primary" @click="doUpdate(u.id)" v-if="u.status==0">报修处理</button>
                        <button class="btn btn-danger" @click="doDelete(u.id)">删除</button>
                        <button  @click="goBack(u.id)" v-if="u.status==1"><span class="glyphicon glyphicon-refresh" aria-hidden="true" ></span></button>
                    </td>
                </tr>
                </tbody>
            </table>
            <ul class="pagination" v-for="p in pageNum">
                <li v-if="p == pageIndex" class="active"><a @click="doGo(p)">{{p}}</a></li>
                <li v-else="p == pageIndex"><a @click="doGo(p)">{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            //用于分页
            pageIndex:1,
            pageSize:5,
            pageNum:0,
            //用于显示列表
            status:null,//用于绑定处理状态,0为待处理,1为已处理
            typeList:null,//用来装所有的报修类型
            comId:null,//用来绑定报修类对应的id
            repairList:null,//用来装repair所有数据

        },
        methods: {
            requestRepairList(p){
                //通过axios发送请求
                var uid = localStorage.getItem("uid");
                var url ="http://localhost:8080/repair/list?pageIndex="+p+"&pageSize="+this.pageSize+"&comId="+this.comId+"&status="+this.status+"&uid="+uid;
                // console.log(url)
                axios.get(url).then(response =>{
                    // console.log(response.data);
                    // console.log(response.data.pageTotle);
                    this.repairList = response.data.data;//给用户列表赋值
                    this.pageTotal = response.data.pageTotal;//给总条数赋值
                    //计算页数
                    this.pageNum = Math.ceil(this.pageTotal/this.pageSize);
                });
            },
            requestRepairType(){
                var uid = localStorage.getItem("uid");
                var url ="http://localhost:8080/repair/rtlist?uid="+uid;
                axios.get(url).then(response =>{
                    console.log(response.data.data);
                    this.typeList = response.data.data;//给类型列表赋值
                });
            },
            doGo(p){
                this.pageIndex = p;
                this.requestRepairList(p);//调用请求用户列表的函数
            },
            doAdd() {
                //页面跳转
                window.parent.main_right.location.href="repair_add_update.html";
            },
            doUpdate(id) {
                //页面跳转
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/repair/update?id="+id+"&uid="+uid).then(response =>{
                    console.log(response.data);
                    if (response.data.code == 200) {
                        this.requestRepairList(this.pageIndex);//刷新用户列表
                    }else {
                        alert(response.data.msg);
                    }
                })
            },
            doDelete(id){
                //通过axios发送请求
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/repair/delete?id="+id+"&uid="+uid).then(response =>{
                    if (response.data.code == 200) {
                        this.requestRepairList(this.pageIndex);//刷新用户列表
                    }else {
                        alert(response.data.msg);
                    }
                })
            },
            doback(){
                    this.pageIndex = 1,
                    this.pageSize = 5,
                    this.pageNum = 0,
                    //用于显示列表
                    this.status = null,//用于绑定处理状态,0为待处理,1为已处理
                    this.typeList = null,//用来装所有的报修类型
                    this.comId = null,//用来绑定报修类对应的id
                    this.repairList=null,//用来装repair所有数据
                   this. requestRepairList(1);
                   this. requestRepairType();

            },
            goBack(id){
                var uid = localStorage.getItem("uid");
                axios.get("http://localhost:8080/repair/refresh?id="+id+"&uid="+uid).then(response =>{
                    console.log(response.data);
                    if (response.data.code == 200) {
                        this.requestRepairList(this.pageIndex);//刷新用户列表
                    }else {
                        alert(response.data.msg);
                    }
                })
            }
        },
        created: function () {
            this. requestRepairList(1);
            this. requestRepairType();
        }
    });
</script>
</body>
</html>